<template>
  <up-popup class="realTimeInfoPopup" closeIconPos="top-right" :round="10" mode="bottom" :overlay="true" :show="show" @close="close" @open="openCallback">
    <view class="header">
      <view style="flex: 1;text-align: center;"><up-text text="資訊" color="#fff"></up-text></view>
      <up-icon :name="closePng" color="rgb(237 237 237)" size="23" @click="close"></up-icon>
    </view>
    <view class="content">
      <view class="searchList">
        <scroll-view :scroll-y="true" class="scroll-Y" >
         	<up-cell-group v-if="drop">
            <up-cell>
              <template #title>
                <up-text :text="drop.cname?drop.cname:drop.caddress" size="15" color="#000" titleStyle="font-weight: bold;"></up-text>
              </template>
              <template #label>
                <up-gap height="3" bgColor="#ffffff00"></up-gap>
                <up-text :text="drop.cname?drop.caddress:''" size="14"></up-text>
              </template>
            </up-cell>
            <up-cell v-for="(value, key) in cextrainfo" :key="key" @click="eventOperation(key,value)">
              <template #title>
                <up-text :text="key" size="14" color="#7099B4"></up-text>
              </template>
              <template #label>
                <up-gap height="3" bgColor="#ffffff00"></up-gap>
                <up-text :text="stripHTML(value)" size="14"></up-text>
              </template>
            </up-cell>
          </up-cell-group>
        </scroll-view>
      </view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import closePng from '@/static/images/close.png'
import { HKMAPaddressDetails } from '@/api/system/map'

// 创建响应式数据
const show = ref(false)


const drop = ref(null)
const cextrainfo = ref<any>({})

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

// 定义方法
function open(data: any) {
  cextrainfo.value = {};
  drop.value = data;
  searchAddressDetails(data.type,data.faciType,data.id)
  show.value = true
}

function openCallback() {
}

function close() {
  show.value = false
}

const searchAddressDetails = (type: string, faciType: string, id: string) => {
  HKMAPaddressDetails(type,faciType,id).then((data:any) => {
    if(data.length>0){
      cextrainfo.value = data[0].cextrainfo
    }
  }).catch(error => {
    console.error("获取数据失败:", error);
  })
}

function onSelectedClick(data: any) {
  emit('click', data)
}

function stripHTML(html:any) {
  return html.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim();
}

function isEmail(email:string) {
  return email.includes('电话');
}

function isHongKongPhone(phone:any) {
  return phone.includes('電話');
}
function isLikelyURL(url:string) {
  return url.includes('網頁');
}


function eventOperation(key:any,value:any) {
    // const data = stripHTML(value);
    // if(isEmail(key)){
    //   console.log('isEmail',data);
    // }
    // if(isHongKongPhone(key)){
    //   console.log('isHongKongPhone',data);
    // }
    // if(isLikelyURL(key)){
    //   console.log('isLikelyURL',data);
    // }
    // #ifdef APP-PLUS
    // plus.runtime.openURL("mailto:abc@example.com?subject=咨询&body=您好，我想了解更多信息");
    // #endif
}


defineExpose({
  open,
  close,
})
</script>

<style lang="scss" scoped>
.realTimeInfoPopup  .header {
  background-color: #7099B4;
  border-radius: 10rpx 10rpx 0 0;
  padding: 20rpx 20rpx;
  display: flex;
}
.realTimeInfoPopup .content {
  padding: 0rpx 20rpx 20rpx 20rpx;
  background-color: #ffffff;
  border-radius: 0px;
  overflow: hidden;
}
.searchList {
  height: 85vh;
  overflow-y: auto;
}
</style>
